<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login/register</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/layui/images/favicon.ico">
    <link rel="stylesheet" href="/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui/css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="/layui/css/themes/default.css" media="all">
    <link rel="stylesheet" href="/layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <!--[if lt IE 9]-->
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/layui/css/login.css">
</head>

<body>
<!-- login/register container -->
<div class="container">
    <!-- register -->
    <div class="form-container sign-up-container">
        <div class="form">
            <form class="layui-form login-bottom">
                <h2>注册界面</h2>
                <input type="text" name="username" id="username" placeholder="用户">
                <input type="phone" lay-verify="phone" name="phoneNum" id="phoneNum" placeholder="手机号">
                <div class="input" >
                    <table>
                        <tr>
                            <td>
                                <input style="width: 110px" type="text" name="verification" id="verification" placeholder="请输入验证码"></td>
                            <td>
                                <button style="width: 160px; margin-left: 10px;" id="yanzheng">发送验证</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <input type="password" id="password" name="password"  placeholder="密码">
                <input type="password" id="password2" name="password2"  placeholder="确认密码">
                <center>
                    <button class="login-btn" id="button" lay-submit="" lay-filter="register">注册</button>
                </center>
            </form>
        </div>
    </div>
    <!-- login -->
    <div class="form-container sign-in-container">
        <form  class="layui-form login-bottom">
            <div class="form" style="margin-top: 120px">
                <h2>登陆界面</h2>
                <input type="text" lay-verify="phone" name="phone" id="phone" placeholder="手机号">
                <input type="password" name="password3" id="password3" placeholder="密码">
                <a href="/openForget" class="forget-password">忘记密码</a>
                <button class="login-btn" lay-submit="" id="button1" lay-filter="login">登录</button>
            </div>
        </form>
    </div>
    <!-- overlay container -->
    <div class="overlay_container">
        <div class="overlay">
            <!-- overlay left -->
            <div class="overlay_panel overlay_left_container">
                <h2>欢迎回来</h2>
                <p>为了与我们保持联系，请使用您的个人信息登录</p>
                <button id="sign-in">登录页面</button>
            </div>
            <!-- overlay right -->
            <div class="overlay_panel overlay_right_container">
                <h2>你好朋友</h2>
                <p>输入您的个人详细信息，与我们一起开始旅程</p>
                <button id="sign-up">注册页面</button>
            </div>
        </div>
    </div>
</div>


<script src="/layui/js/login.js"></script>
<script src="/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/layui/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['form','jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        $('.icon-nocheck').on('click', function () {
            if ($(this).hasClass('icon-check')) {
                $(this).removeClass('icon-check');
            } else {
                $(this).addClass('icon-check');
            }
        });
        // 广告主进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.phone == ''){
                layer.msg('登录手机号不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            $.ajax({
                url: '/login',
                type: 'post',
                data: data,
                dataType: 'json',
                success: function(result) {
                    if (result.code == '0') {
                        layer.msg('登录成功');
                        setTimeout("window.location = '/index'",500);

                    } else {
                        layer.msg(result.msg);
                        return false;
                    }
                }
            });
            return false;
        });

        var btn = document.querySelector('#yanzheng');
        var time = 60; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送验证';
                } else {
                    btn.innerHTML = time + '秒';
                    time--;
                }
            }, 1000);

            var phoneNum = $("#phoneNum").val();
            if (phoneNum == null || phoneNum == ''){
                layer.msg("请先输入手机号")
                return false;
            }
            $.ajax({
                url: '/massage',
                type: 'post',
                data: 'phoneNum=' + phoneNum,
                dataType: 'json',
                success: function (result) {
                    layer.msg(result.msg)
                }
            });
            return false;
        })

        // $('#yanzheng').click(function () {
        //
        // })
        // 后台管理员进行登录操作
        form.on('submit(register)', function (data) {
            data = data.field;
            if (data.username == ''){
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.phone == '') {
                layer.msg('注册手机号不能为空');
                return false;
            }
            if (data.verification == ''){
                layer.msg('请先获取验证码');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.password2 == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.password2 != data.password) {
                layer.msg('两次输入的密码不一致');
                return false;
            }
            /*if (data.captcha == '') {
                layer.msg('验证码不能为空');
                return false;
            }*/
            $.ajax({
                url: '/CheckCode',
                type: 'post',
                data: data,
                dataType: 'json',
                success: function(result) {
                    if (result.code == '0') {
                        alert('注册成功')
                        location.reload();
                    } else {
                        alert(result.msg);
                    }
                }
            });

            return false;
        });
    });
</script>
</body>

</html>
